<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            display: none;
        }
        i {
            padding: 20px;
            background-color: #00AA88;
            margin: 3px;
        }
    </style>
    <script src="../../js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="box1">
    <li>
        <a href="#"><img src="img/1.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/2.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/3.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/4.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/5.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/6.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/7.jpg" width="760" height="300"></a>
    </li>
    <ul>

    </ul>
</div>
<div id="box2">
    <li id="">
        <a href="#"><img src="img/1.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/2.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/3.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/4.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/5.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/6.jpg" width="760" height="300"></a>
    </li>
    <li>
        <a href="#"><img src="img/7.jpg" width="760" height="300"></a>
    </li>
    <ul>

    </ul>
</div>

<script>
   function move(selector) {
       var $div = $(selector)
       var i = 0;
       var $lis = $div.find("li");
       var len = $lis.length;
       function foo(){
           if (i>=len){
               i = 0;
           }
           $lis.hide();
           $lis.eq(i).show()
           console.log(i)
           i++;
       }
       foo()
       var t = setInterval(foo,1000);

       $div.mouseover(function(){
           clearInterval(t);
       }).mouseout(function(){
           t = setInterval(foo,1000);
       })

       $lis.each(function(i){
           $("ul").append('<i>'+ (i+1) +'</i>')
       })

       $div.find("ul i").click(function(){
//        console.log()
           i = $div.find("ul i").index($(this))
           foo();
       })
   }
   move('#box1');
   move('#box2');
</script>
</body>
</html>